<template>
  <video ref="video" controls :poster="posterUrl">
    <source :src="fileUrl" />
    Your browser does not support the video tag.
  </video>
</template>

<script>
export default {
  name: 'VideoPreview',
  props: {
    fileUrl: {
      type: String
    },
    posterUrl: {
      type: String
    }
  },
  methods: {
    errorHandler() {
      this.$emit('error', this.$el);
    },
    playHandler() {
      this.$emit('play', this.$el);
    },
    pauseHandler() {
      this.$emit('pause', this.$el);
    },
    endedHandler() {
      this.$emit('ended', this.$el);
    },
    loadedmetadataHandler() {
      this.$emit('loadedmetadata', this.$el);
    }
  },
  mounted() {
    this.$refs.video.addEventListener('error', this.errorHandler);
    this.$refs.video.addEventListener('play', this.playHandler);
    this.$refs.video.addEventListener('pause', this.pauseHandler);
    this.$refs.video.addEventListener('ended', this.endedHandler);
    this.$refs.video.addEventListener('loadedmetadata', this.loadedmetadataHandler);
  },
  destroyed() {
    this.$refs.video.removeEventListener('error', this.errorHandler);
    this.$refs.video.removeEventListener('play', this.playHandler);
    this.$refs.video.removeEventListener('pause', this.pauseHandler);
    this.$refs.video.removeEventListener('ended', this.endedHandler);
    this.$refs.video.removeEventListener('loadedmetadata', this.loadedmetadataHandler);
  }
};
</script>

<style></style>
